<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"/>
    <link rel="stylesheet" href="/manageSystem/layui/css/layui.css">
    <link rel="stylesheet" href="/manageSystem/css/common.css">
    
    <link rel="stylesheet" href="/manageSystem/layui/extend/dtree.css">
    <link rel="stylesheet" href="/manageSystem/layui/extend/font/dtreefont.css">

    <!-- 图标 -->
<!--    <link rel="stylesheet" href="/manageSystem/static/CaoMei/style.css">-->

    <style>
        .myadmin-body{
            margin: 40px 3px;
        }
    </style>
</head>
<body>
<!--    <div class="yadmin-body animated fadeIn" style="margin: 0;padding: 0">-->
    <div class="myadmin-body">

        <!--搜索框-->
        <form class="layui-form yadmin-search-area input">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label for="roleName" class="layui-form-label">名称</label>
                    <div class="layui-input-inline">
                        <input type="text" name="roleName" autocomplete="off"
                               id="roleName" class="layui-input">
                    </div>

                    <button lay-submit="" lay-filter="search" class="layui-btn layui-btn-sm layui-btn-primary table-action">
                        <i class="layui-icon layui-icon-search"></i>
                    </button>
                </div>
            </div>
        </form>

        <table class="layui-hide" id="role-table"></table>
        <!--下面是动态表格-->
    </div>

    <!--新增按钮-->
    <script type="text/html" id="toolbar">

        <button type="button" class="layui-btn layui-btn-xs layui-btn-normal" lay-event="add">
            <i class="layui-icon layui-icon-addition"></i>
            新增
        </button>

    </script>

    <!--授权功能和授权菜单-->
    <script type="text/html" id="auth-toolbar">

        <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="grant-menu">授权菜单</a>

        <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="grant-operator">授权功能</a>

    </script>

    <!--编辑和删除-->
    <script type="text/html" id="column-toolbar">

        <button type="button" class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">
            <i class="layui-icon layui-icon-edit" title="编辑"></i>
            编辑
        </button>

        <button type="button" class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">
            <i class="layui-icon layui-icon-delete" title="删除"></i>
            删除
        </button>

    </script>

    <script src="/manageSystem/js/jquery.js"></script>
    <script src="/manageSystem/layui/layui.js"></script>
    <script src="/manageSystem/js/common.js"></script>

    <!--页面配置-->
    <script>
        layui.config({
            // base: '/layui/extend/'
            base: '/manageSystem/layui/extend/'
        }).use(['table', 'element', 'dtree', 'form', 'tablePlug'], function () {
            var table = layui.table;
            var $ = layui.$;
            var dtree = layui.dtree;
            var form = layui.form;
            var tablePlug = layui.tablePlug;

            tablePlug.smartReload.enable(true);

            form.on('submit(search)', function (form) {
                table.reload('role-table', {
                    where: form.field
                });
                return false;
            });

            /*表格*/
            table.render({
                elem: '#role-table',
                // url: '/data/role/list.json',
                url: '/manageSystem/data/role/list.json',
                cellMinWidth: 80,
                // cellMinWidth: 200,
                page: true,
                toolbar: '#toolbar',
                smartReloadModel: true,
                cols: [
                    [
                        {type: 'numbers', title: '序号', width: 60},
                        {field: 'roleId', title: 'ID', hide: true},
                        {field: 'roleName', title: '角色名称', width: 120},
                        {field: 'remark', title: '描述', minWidth: 200},
                        {title: '授权', align: 'center', width: 200, toolbar: '#auth-toolbar'},
                        {title: '操作', fixed: 'right', width: 200, align: 'center', toolbar: '#column-toolbar'}
                    ]
                ]
            });

            table.on('toolbar', function (obj) {
                var event = obj.event;
                if (event === 'add') {
                    add();
                }
            });

            table.on('tool', function (obj) {
                var data = obj.data;
                var event = obj.event;

                if (event === 'edit') {
                    edit(data.roleId);
                } else if (event === 'grant-menu') {
                    layer.open({
                        type: 1,
                        title: "授权菜单",
                        area: ["350px", "85%"],
                        shadeClose: true,
                        content: '<ul id="menuTree" class="dtree" data-id="0"></ul>',
                        btn: ['确认选择'],
                        success: function(layero, index){
                            dtree.render({
                                obj: $(layero).find("#menuTree"),
                                // url: "/data/menu/tree.json",
                                url: "/manageSystem/data/menu/tree.json",
                                dataStyle: "layuiStyle",
                                method: "GET",
                                dot: false,
                                checkbar: true, // 开启复选框
                                menubar: true,
                                response: {
                                    statusCode: 0,
                                    message: "msg",
                                    treeId: "id",
                                    parentId: "parentId",
                                    title: "name"
                                }
                            });
                        },
                        yes: function(index, layero) {
                            var flag = true;
                            var nodes = dtree.getCheckbarNodesParam("menuTree"); // 获取选中值
                            var ids = [];
                            for (var key in nodes) {
                                var node = nodes[key];
                                ids.push(node.nodeId);
                            }
                            console.log("授权菜单 ID: " + ids);
                            layer.msg("授权成功", {icon: 6});
                            layer.close(index);

                        }
                    });
                } else if (event === 'grant-operator') {
                    layer.open({
                        type: 1,
                        title: "授权功能",
                        area: ["350px", "85%"],
                        shadeClose: true,
                        content: '<ul id="operatorTree" class="dtree" data-id="0"></ul>',
                        btn: ['确认选择'],
                        success: function(layero, index){
                            dtree.render({
                                obj: $(layero).find("#operatorTree"),
                                // url: "/data/operator/tree.json",
                                url: "/manageSystem/data/operator/tree.json",
                                dataStyle: "layuiStyle",
                                initLevel: 5,   // 初始打开节点级别
                                method: "GET",
                                dot: false,
                                checkbar: true, // 开启复选框
                                menubar: true,
                                response: {
                                    statusCode: 0,
                                    message: "msg",
                                    treeId: "id",
                                    parentId: "parentId",
                                    title: "name"
                                }
                            });
                        },
                        yes: function(index, layero) {
                            var flag = true;
                            var nodes = dtree.getCheckbarNodesParam("operatorTree"); // 获取选中值
                            var ids = [];
                            for (var key in nodes) {
                                var node = nodes[key];
                                ids.push(node.nodeId);
                            }
                            console.log("授权功能 ID: " + ids);
                            layer.msg("授权成功", {icon: 6});
                            layer.close(index);
                        }
                    });
                } else if (event === 'del') {
                    layer.confirm("确定删除角色吗?", {icon: 3, title: '提示'},
                        function (index) {// 确定回调
                            obj.del();
                            parent.layer.msg("删除成功", {icon: 6});
                            layer.close(index);
                        }, function (index) {//取消回调
                            layer.close(index);
                        }
                    );
                }
            });

            function add() {
                layer.open({
                    // content: "/view/role/role-add.html",
                    content: "/manageSystem/view/role/role-add.html",
                    title: "新增角色",
                    area: ['40%', '85%'],
                    type: 2,
                    maxmin: true,
                    shadeClose: true,
                    end: function () {
                        table.reload('role-table');
                    }
                });
            }

            function edit(id) {
                layer.open({
                    content: "/role/" + id,
                    title: "编辑角色",
                    area: ['40%', '85%'],
                    type: 2,
                    maxmin: true,
                    shadeClose: true,
                    end: function () {
                        table.reload('role-table');
                    }
                });
            }
        });
    </script>

    <!--表格设置宽度-->
    <script>

        // var bodyWidth = document.getElementsByTagName("body")
        // var userTableWidth = document.body.clientWidth
        //
        // function userTableWidthFun() {
        //     alert("屏幕加载完成")
        //     if (document.body.clientWidth < 1000) {
        //         userTableWidth = document.body.clientWidth * 2
        //         // 数据库回传的信息
        //         layui.use("layer", function () {
        //             // 提示显示错误信息。
        //             layer.msg("当前屏幕过小，页面显示可能会不完全", {icon: 0});
        //         })
        //     }
        // }
        // userTableWidthFun()
        //
        //
        // // window.onresize = userTableWidthFun()
        // window.onresize = function () {
        //     console.log("页面宽度改变了")
        // }



        //
        // var userTable = document.getElementById("user-table")
        // var userTableTop = document.getElementById("user-table-top")
        // var userTableWidth = userTableTop.style.width = document.body.clientWidth
        // // document.body.clientWidth
        // console.log("当前宽度：")
        // console.log(userTable.clientWidth)
        // console.log("当前页面的宽度：")
        // console.log(document.body.clientWidth)
        //
        //
        // // 设置屏幕宽度。
        // if (userTableWidth>1000){
        //     userTableWidth = document.body.clientWidth
        // }else {
        //     userTableWidth = document.body.clientWidth * 2
        // }
        //
        // window.onresize=function(){
        //     // 设置屏幕宽度。
        //     if (userTableWidth>1000){
        //         userTableWidth = userTableTop.style.width = document.body.clientWidth
        //
        //     }else {
        //         userTableWidth = userTableTop.style.width = document.body.clientWidth * 2
        //     }
        // }
    </script>
</body>
</html>